<template>
  <view class="flex-col">
    <view class="page-wrap">
      <uni-forms ref="form" :value="form" labelWidth="auto" :labelPosition="'top'">


        <uni-forms-item name="deptLabel" label="选择组织:">
          <empty-input @empClick="showPicker" v-model="form.deptLabel" placeholder="请选择"></empty-input>
        </uni-forms-item>

        <uni-forms-item name="followerIds" label="转移对象名称:" required
                        :rules="[{
                                 required: true,
                                 errorMessage: '请选择转移对象名称',
                                 validateTrigger: 'bind'
                               }]">
          <zxz-uni-data-select
			      @change="$forceUpdate()"
            v-model="form.followerIds" multiple
            dataKey="userName"
            dataValue="userId"
            :localdata="userList"></zxz-uni-data-select>
        </uni-forms-item>

        <uni-forms-item name="transferMemo" label="备注:">
          <uni-easyinput type="textarea" maxlength="500" v-model="form.transferMemo" placeholder="请输入备注"/>
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="button-container">
      <button class="btn-item" @click="submit">提 交</button>
    </view>

    <ba-tree-picker ref="treePicker" :multiple='false' @select-change="selectChange" title="选择组织"
                    :localdata="deptOptions" valueKey="id" textKey="label" childrenKey="children"/>
  </view>
</template>

<script>
import {cluesTransferRecordAdd} from "@/api/memberManage/clueList";
import {deptTreeSelect, listUser} from "@/api/system/user";

export default {
  dicts: [],
  data() {
    return {
      form: {},
      cluesId: null,
      deptOptions: [],
      userList: [],
    }
  },
  onLoad(op) {
    this.getDeptTree();
    // this.getUserList();
    console.log('op', op);
    this.cluesId = op?.cluesId ?? null;

  },
  methods: {
    /** 查询组织下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 显示选择器
    showPicker() {
      console.log('showPicker')
      this.$refs.treePicker._show();
    },
    //监听选择（ids为数组）
    selectChange(ids, names) {
      console.log('selectChange', ids, names);
      this.form.deptId = ids[0];
      this.form.deptLabel = names;

      this.form.followerIds = null;
      this.getUserList();
    },
    getUserList() {
      listUser({
        pageNum: 1,
        pageSize: 100000,
        deptId: this.form?.deptId ?? null,
        status: 0
      }).then(response => {
          this.userList = response.rows;
          // this.total = response.total;
          // this.loading = false;
        }
      );
    },
    submit() {
	  console.log(this.form, 'this.form');

      this.$refs.form.validate().then(res => {
        uni.showLoading();
        cluesTransferRecordAdd({
          ...this.form,
          cluesId: this.cluesId,
          cluesFollowerTypeCode: 2
        }).then(response => {
          uni.hideLoading();
          uni.$emit("refreshClue", true);
          this.$modal.msgSuccess("转移成功");
          setTimeout(() => {
            this.$tab.navigateBack();
          }, 1000)
        }).finally(f => {
			setTimeout(() => {
			  uni.hideLoading();
			}, 1000)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
